$(() => {
    // 获取传过来的参数
    const usp = new URLSearchParams(location.search)
    // 获取id,获取单个用get,多个有forEach
    const id = usp.get('id')
    // console.log(id);

    // 2、下拉类别列表渲染
    function getCategoryList() {
        myAjax('get', '/admin/category/list', {}, (res) => {
            // console.log(res);
            // 先渲染类别
            let htmlStr = template('moban', res)
            $('#category').html(htmlStr)
            // 再渲染文章的详情
            getArticleInfo()
        })
    }
    getCategoryList()

    // 根据id获取文章详情
    function getArticleInfo() {
        myAjax('get', '/admin/article/search', { id }, (res) => {
            // console.log(res);
            // 标题
            $('#inputTitle').val(res.data.title)
            // 封面
            $('.article_cover').prop('src', res.data.cover)
            // 类别
            $('#category').val(res.data.categoryId)
            // 日期
            $('#articleDate').val(res.data.date)
            // 内容
            $('#articleContent').val(res.data.content)
        })
    }

    //3、渲染日期选择组件
    const renderDate = () => {
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#articleDate' //指定元素,改成项目中的id
            });
        });
    }
    renderDate()
    // 4、初始化富文本编辑器
    const renderRichText = () => {
        tinymce.init({
            selector: '#articleContent',
            // 配置语言为中文
            language: 'zh_CN',
        });
    }
    renderRichText()

    // 5、表单提交事件
    $('form').on('submit', function (e) {
        // 阻止默认行为
        e.preventDefault()
        //快速收集表单数据
        let fd = new FormData($('form').get(0))
        fd.append('id', id)
        fd.append('state', state)
        // fd.forEach((value, key) => {
        //     console.log({ key, value });
        // })
        // 发送ajax请求
        myAjax('post', '/admin/article/edit', fd, (res) => {
            //    console.log(res)
            if (res.code !== 200) {
                // 失败情况
                return layer.msg(res.msg, { icon: 3, time: 1000 }, () => {
                });
            }
            else {
                layer.msg(res.msg, { icon: 1, time: 1000 }, () => {
                    // 提示成功关闭后跳转页面
                    location.href = 'article_list.html'
                });
            }
        })
    })
    // 绑定点击修改事件，先触发自己的事件，再冒泡到表单的提交事件
    let state = ''
    $('.btn-edit').on('click', function () {
        state = '已发布'
    })

    // 绑定事件，图片预览效果
    $('#inputCover').on('change', function () {
        // console.log(this.files);
        // 基于文件对象创建一个用于预览的url地址
        let url = URL.createObjectURL(this.files[0])
        // 设置图片的路径
        $('.article_cover').prop('src', url)
    })
})